<template>
	<div>
		<div class="mui-card" v-for="item in newslist" :key="item.user_name">
			<div class="mui-card-header mui-card-media">
				<img :src="item.img_url" />
				<div class="mui-media-body">
					<div class="title"><div>{{item.name}}</div> <div class="news_title">{{item.dynamic_title}}</div></div>
					<p>发表于 {{item.release_date | filterDate("YYYY-MM-DD HH-mm-ss")}}</p>
				</div>
				<!--<img class="mui-pull-left" src="../images/logo.png" width="34px" height="34px" />
							<h2>小M</h2>
							<p>发表于 2016-06-30 15:30</p>-->
			</div>
			<div class="mui-card-content">
				<!-- 这里要确定图片格式  500*333 -->
				<img :src="item.img_url" alt="" width="100%" />
			</div>
			<div class="mui-card-footer">
				<a class="mui-card-link">Like</a>
				<a class="mui-card-link">Comment</a>
				<!-- :to="{ name: 'user', params: { userId: 123 }}" -->
				<router-link :to="'/news/list/readmore/'+item.id"><a class="mui-card-link">Read more</a></router-link>\
				<!-- <router-link :to="{ path: '/news/list/readmore/', params: { id: item.id }}">Read more</a></router-link> -->
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Toast from "mint-ui"
	export default {
		data() {
			return {
				newslist: []
			}
		},
 		created() {
			this.getdata()
		},
		
		methods: {
			getdata() {
/* 				var list = [{
						"user_img": "/src/images/logo.png",
						"release_img": "/src/images/yuantiao.jpg",
						"user_name": "小张",
						"release_date": "2016-06-30 15:30:56",
					},
					{
						"user_img": "/src/images/logo.png",
						"release_img": "/src/images/yuantiao.jpg",
						"user_name": "小李",
						"release_date": "2016-06-30 15:30:56",
					},
					{
						"user_img": "/src/images/logo.png",
						"release_img": "/src/images/yuantiao.jpg",
						"user_name": "小黄",
						"release_date": "2016-06-30 15:30:56",
					}
				] */
				
				this.$http.get("/test/dynamic/queryAllNews").then(result => {
					if (result.status === 200) {
						this.newslist = result.body
						console.log("运行到这里了")
					} else {
						Toast("请求失败")
					}
				})
				
			}
		}
	}
</script>



<style>
	.news_title{
		flex: 8;
	}
	.title{
		display: flex;
	}
	.title>div:nth-child(1){
		flex: 2;
	}
	
	.title>div:nth-child(2){
		flex: 8;
		text-align: center;
	}
</style>
